<!--
 * @Descripttion: 后台管理系统
 * @version: 1.0
 * @Author: 狸猫
 * @Date: 2023-12-26 09:44:08
 * @LastEditors: 狸猫
 * @LastEditTime: 2024-01-12 15:05:16
-->
<template>
  <div class="container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="企业信息" name="enterprise">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="企业全名" style="width: 50%" prop="tenantName">
            <el-input v-model="form.tenantName" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="企业简称" style="width: 50%" prop="tenantShortName">
            <el-input v-model="form.tenantShortName" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="企业介绍" style="width: 50%">
            <el-input
              type="textarea"
              :rows="5"
              v-model="form.intro"
              placeholder="输入企业介绍"
              maxlength="200"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业logo" style="width: 50%">
            <el-upload
              ref="enterprise"
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :auto-upload="false"
              :on-change="imgSaveToUrl"
              :accept="'image/*'"
            >
              <img v-if="form.icon" :src="form.icon" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <div style="padding: 10px 20px; display: flex">
            <el-button
              style="width: 100px"
              type="primary"
              round
              size="mini"
              @click="saveEnterprise()"
              >保存</el-button
            >
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="微信商户号" name="merchant">
        <el-form
          label-position="left"
          :model="wxInfo"
          :rules="rules"
          ref="wxInfo"
        >
          <div class="first_box">
            <el-form-item label="商户号" prop="accountId">
              <el-row>
                <el-col :span="12">
                  <el-input
                    v-model="wxInfo.accountId"
                    maxlength="32"
                  ></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="API秘钥" prop="accountApiKey">
              <el-row>
                <el-col :span="12">
                  <el-input
                    v-model="wxInfo.accountApiKey"
                    maxlength="32"
                  ></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="API证书" prop="file">
              <el-upload
                class="upload-demo"
                action=""
                :show-file-list="true"
                :auto-upload="false"
                :on-change="uploadWX"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    pkcs12格式证书，上传前请先下载证书，具体方
                    法详见微信支付官方文档
                  </div>
                  <el-button type="text" @click="newClient"
                    >点击查看证书下载方法</el-button
                  >
                </template>
              </el-upload>
            </el-form-item>
            <div style="padding: 10px 20px; display: flex">
              <el-button
                style="width: 100px"
                type="primary"
                round
                size="mini"
                @click="saveWechat()"
                >保存</el-button
              >
            </div>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="电子合同" name="contract">
        <el-form ref="contract" :model="contractForm" label-width="80px">
          <el-form-item label="是否开通电子合同" label-width="120">
            <el-switch
              disabled
              active-value="1"
              inactive-value="0"
              v-model="contractForm.electronicVisaStatus"
            ></el-switch>
            <span style="margin-left: 5px">{{
              contractForm.electronicVisaStatus == 1 ? "已开通" : "未开通"
            }}</span>
          </el-form-item>
          <el-form-item label="合同总量">
            <el-input
              v-model="contractForm.contractTotalNumber"
              readonly
              style="width: 50%"
            ></el-input>
          </el-form-item>
          <el-form-item label="已用数量">
            <el-input
              v-model="contractForm.contractUsedNumber"
              readonly
              style="width: 50%"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  getEnterprise,
  electronicVisaInfo,
  WechatAccount,
  department,
  putWechatAccount,
} from "@/api/system/enterprise";
export default {
  name: "enterpriseIndex",
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      activeName: "enterprise",
      //企业信息
      form: {
        tenantName: "",
        tenantShortName: "",
        intro: "",
        icon: "",
      },
      file: null, //头像文件
      //微信商户号
      wxInfo: {
        type: 1,
        mchPublicPem: "",
        mchId: "",
        mchApiKey: "",
        file: "",
        accountApiKey: "",
        accountCertificate: "h",
        accountId: "",
        wechatAccountId: '',
      },
      //合同信息
      contractForm: {},
      rules: {
        tenantName: [
          { required: true, message: "请输入企业全名", trigger: "blur" },
        ],
        tenantShortName: [
          { required: true, message: "请输入企业简称", trigger: "blur" },
        ],
        accountId: [
          { required: true, message: "请输入商户号", trigger: "blur" },
        ],
        accountApiKey: [
          { required: true, message: "请输入API秘钥", trigger: "blur" },
        ],
        //file: [{ required: true, message: "请上传商户证书", trigger: "blur" }],
      },
    };
  },
  components: {},
  mounted() {
    this.getEnterpriseInfo();
    this.getElectronicVisaInfo();
    this.getWechatAccount();
  },
  methods: {
    //保存微信商户号
    saveWechat() {
      this.$refs["wxInfo"].validate((valid) => {
        if (valid) {
          const formData = new FormData();
          formData.append("accountId", this.wxInfo.accountId);
          formData.append("accountApiKey", this.wxInfo.accountApiKey);
          formData.append("wechatAccountId", this.wxInfo.wechatAccountId);
          if (this.wxInfo.file) {
            formData.append("file", this.wxInfo.file);
          }
          const loading = this.$loading({
            lock: true,
            text: "请求中，请稍候...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          putWechatAccount(formData)
            .then((res) => {
              loading.close();
              this.$message.success("保存成功");
            })
            .catch((res) => {
              loading.close();
            });
        }
      });

      //this.$refs.enterprise.submit();
    },
    //保存企业信息
    saveEnterprise() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const formData = new FormData();
          formData.append("tenantName", this.form.tenantName);
          formData.append("tenantShortName", this.form.tenantShortName);
          formData.append("intro", this.form.intro);
          formData.append("tenantId", this.form.tenantId);
          if (this.file) {
            formData.append("file", this.file);
          }
          const loading = this.$loading({
            lock: true,
            text: "请求中，请稍候...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          console.log(formData)
          department(formData)
            .then((res) => {
              loading.close();
              this.$message.success("保存成功");
            })
            .catch((res) => {
              loading.close();
            });
        }
      });

      //this.$refs.enterprise.submit();
    },
    //获取微信商户号信息
    getWechatAccount() {
      WechatAccount().then((res) => {
        if(res.data){
          this.wxInfo = res.data;
        }

      });
    },
    //电子签信息
    getElectronicVisaInfo() {
      electronicVisaInfo().then((res) => {
        this.contractForm = res.data;
      });
    },
    //企业信息
    getEnterpriseInfo() {
      getEnterprise().then((res) => {
        this.form = res.data;
      });
    },
    handleClick(tab, event) {},
    //上传微信证书
    uploadWX(event) {
      this.wxInfo.file = event.raw;
    },
    imgSaveToUrl(event) {
      // 获取上传图片的本地URL，用于上传前的本地预览
      var URL = null;
      if (window.createObjectURL != undefined) {
        // basic
        URL = window.createObjectURL(event.raw);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        URL = window.URL.createObjectURL(event.raw);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        URL = window.webkitURL.createObjectURL(event.raw);
      }
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
      this.form.icon = URL;
      this.file = event.raw;
    },
    newClient() {
      let url =
        "https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_3";
      window.open(url, "_blank");
      // window.location.href ='https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_3'; //  跳转链接
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 30px 15px;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
